scriptscript
<template>
  <div class="laundry">
    <table border="1" style="width: 100%">
      <thead>
        <th colspan="8" style="height: 50px">入库清单</th>
      </thead>
      <tbody>
        <tr style="height: 40px">
          <td>姓名:{{ detail?.customerName }}</td>
          <td>地址：{{ detail?.customerAddress }}</td>
          <td>电话：{{ detail?.customerMobileCode }}</td>
          <td>入库编码：{{ detail?.inboundNo }}</td>
          <td>物流编号：{{ detail?.logisticsTrackNo }}</td>
          <td>入库备注</td>
          <td></td>
          <td></td>
        </tr>
        <tr style="height: 40px">
          <td style="text-align: center">收货信息</td>
          <td colspan="4">
            <div>
              {{
                detail?.receivingName == null
                  ? ""
                  : detail?.receivingName == null
                    ? ""
                    : detail?.receivingName + "," + detail?.receivingMobile == null
                      ? ""
                      : detail?.receivingMobile + "," + detail?.receivingAreaDetail == null
                        ? ""
                        : detail?.receivingAreaDetail + "," + detail?.receivingAddress == null
                          ? ""
                          : detail?.receivingAddress
              }}
            </div>
          </td>
          <td colspan="4">
            <div class="remarks" v-html="detail?.remark"></div>
          </td>
        </tr>
        <tr style="height: 40px">
          <td style="text-align: center">序号</td>
          <td>商品信息</td>
          <td>商品单位</td>
          <td>商品备注</td>
          <td>预计入库数量</td>
          <td>预计入库件数</td>
          <td>剩余入库数量</td>
          <td>剩余入库件数</td>
        </tr>
        <tr style="height: 80px" v-for="(item, index) in detail?.inboundOrderListDetailsList" :key="index">
          <td style="text-align: center">{{ index + 1 }}</td>
          <td>
            <div>商品名称:{{ item?.productName }}</div>
            <div>
              规格组合:
              <!-- <span v-for="(item, index) in JSON.parse(item.skuProperties)" :key="index">{{
                item.specificationName + ":" + item.specificationVal
              }}</span> -->
              {{ item.skuProperties }}
            </div>
            <div>SKU编码:{{ item?.skuCode }}</div>
            <div>ID:{{ item?.productId }}</div>
          </td>
          <td style="text-align: center">{{ useCodeArrStore().getDictName("shop_unit", item?.productUnit) }}</td>
          <td style="max-width: 160px">
            <div class="remarks" v-html="item?.remark"></div>
          </td>
          <td style="text-align: center">{{ item?.deliveryQuantity }}</td>
          <td style="text-align: center">{{ item?.deliveryPartQuantity }}</td>
          <td style="text-align: center">{{ item?.residueQuantity }}</td>
          <td style="text-align: center">{{ item?.residuePartQuantity }}</td>
        </tr>
      </tbody>
    </table>
    <div class="btn_print">
      <!-- <el-button type="" @click="handelClickBck">返回</el-button> -->
      <el-button type="primary" @click="handelClickPrint">打印</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue";
import SearchForm from "@/components/SearchForm";
import { Search, RefreshRight } from "@element-plus/icons-vue";
import { listDetails } from "@/apis/procure/entry";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import useCodeArrStore from "@/store/modules/select";

const list = ref([]);
const detail = ref({});
const textarea = ref("");
const inboundId = ref(route.query.inboundId);
const setStyles = () => {
  setTimeout(() => {
    let imgs = document.querySelectorAll(".remarks img");
    let video = document.querySelectorAll(".remarks video");

    // 遍历这些img元素
    imgs.forEach(function (img) {
      // 设置每个img元素的宽度为100px
      img.style.width = "100px";
    });
    // 遍历这些img元素
    video.forEach(function (video) {
      // 设置每个img元素的宽度为100px
      video.style.width = "100px";
    });
  }, 1000);
};
onMounted(() => {
  getList();
  // 控制文本框样式
  // setTimeout(() => {
  //   const remark_style = document.getElementsByClassName("remark_style");
  //   for (let index = 0; index < remark_style.length; index++) {
  //     const img = remark_style[index].querySelector("img");
  //     const video = remark_style[index].querySelector("video");
  //     if (img) {
  //       img.style.width = 130 + "px";
  //     }
  //     if (video) {
  //       video.style.width = 130 + "px";
  //     }
  //   }
  //   // // 入库备注
  //   const ruk_remark = document.getElementsByClassName("ruk_remark");
  //   for (let index = 0; index < ruk_remark.length; index++) {
  //     const img = ruk_remark[index].querySelector("img");
  //     const video = ruk_remark[index].querySelector("video");
  //     if (img) {
  //       img.style.width = 130 + "px";
  //     }
  //     if (video) {
  //       video.style.width = 130 + "px";
  //     }
  //   }
  // }, 1000);
  setStyles();
  // p.style.color="red"
});
const handelClickBck = () => {
  router.go(-1);
};
// 打印事件
const handelClickPrint = () => {
  // window.print(); // 打印当前窗口
  const printWindow = window.open("", "", "height=800,width=800");
  printWindow.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>Print Content</title>
          <style>
          table {
              border-collapse: collapse;
            }
            table td,
            table th {
              border: 1px solid black; /* 单元格边框 */
            }
               @media print {
                img {
                  /* 控制打印时图片的大小 */
                  width: 50px; /* 你可以根据需要调整图片的大小 */
                  height: 50px;
                }
                  video{
                    width: 50px;
                    height: 50px;
                  }
                }
          </style>
        </head>
        <body>
       <table border="1" style="width: 100%">
      <thead>
        <th colspan="8" style="height: 50px">入库清单</th>
      </thead>
      <tbody>
        <tr style="height: 40px">
          <td>姓名:${detail.value?.customerName == null ? "" : detail.value?.customerName}</td>
          <td>地址：${detail.value?.customerAddress == null ? "" : detail.value?.customerAddress}</td>
          <td>电话：${detail.value?.customerMobileCode == null ? "" : detail.value?.customerMobileCode}</td>
          <td>入库编码：${detail.value?.inboundNo == null ? "" : detail.value?.inboundNo}</td>
          <td>物流编号：${detail.value?.logisticsTrackNo == null ? "" : detail.value?.logisticsTrackNo}</td>
          <td colspan="4">入库备注</td>
        </tr>
        <tr style="height: 40px">
          <td style="text-align: center">收货信息</td>
          <td colspan="4">
            <div>
              ${
                detail.value?.receivingName == null
                  ? ""
                  : detail.value?.receivingName == null
                    ? ""
                    : detail.value?.receivingName + "," + detail.value?.receivingMobile == null
                      ? ""
                      : detail.value?.receivingMobile + "," + detail.value?.receivingAreaDetail == null
                        ? ""
                        : detail.value?.receivingAreaDetail + "," + detail.value?.receivingAddress == null
                          ? ""
                          : detail.value?.receivingAddress
              }
            </div>
          </td>
          <td colspan="4">
            <div style="width:130px;overflow: hidden;">${detail.value?.remark}</div>
            </td>
        </tr>
        <tr style="height: 40px">
          <td style="text-align: center;width:100px;">序号</td>
          <td>商品信息</td>
          <td>商品单位</td>
          <td>商品备注</td>
          <td>预计入库数量</td>
          <td>预计入库件数</td>
          <td>剩余入库数量</td>
          <td>剩余入库件数</td>
        </tr>
                ${detail.value?.inboundOrderListDetailsList.map((item, index) => {
                  return `
                    <tr style="height: 80px">
                  <td style="text-align: center">${index + 1}</td>
                  <td>
                    <div>商品名称:${item?.productName == null ? "" : item?.productName}</div>
                    <div>规格组合:${item.skuProperties}</div>
                    <div>SKU编码:${item?.skuCode}</div>
                    <div>ID:${item?.businessSkuId}</div>
                  </td>
                  <td style="text-align: center">${useCodeArrStore().getDictName("shop_unit", item?.productUnit) || ""}</td>
                  <td>
                  <div class="remark_style" v-html="item?.remark">${item?.remark}</div>
                  </td>
                  <td style="text-align: center">${item?.deliveryQuantity}</td>
                  <td style="text-align: center">${item?.deliveryPartQuantity}</td>
                  <td style="text-align: center">${item?.residueQuantity}</td>
                  <td style="text-align: center">${item?.residuePartQuantity}</td>
                </tr>
                    `;
                })}
            </tbody>
          </table>
        </body>
      </html>
    `);
  printWindow.document.close();
  printWindow.print();
};
const printContent = () => {
  //打印的整体思路是：获取body的内容进行存储，然后获取打印区域的内容填充到body中，进行打印，打印完成后，再将之前存储的body内容重新赋值给body即可。windown.print()默认打印的内容是body的内容。
  // let oldStr = window.document.body.innerHTML;
  let newStr = document.getElementById("printContent").innerHTML;
  window.document.body.innerHTML = newStr;
  window.print();
  // window.document.body.innerHTML = oldStr;
  router.go(0);
};

const getName = code => {
  return useCodeArrStore().getDictName("shop_unit", code);
};

//查询列表数据
const getList = () => {
  listDetails({ inboundId: inboundId.value }).then(res => {
    if (res.code === 200) {
      detail.value = res.data;
      list.value = res.data.inboundOrderListDetailsList;
    }
  });
};

//拼接商品的sku规格
const getSpes = properties => {
  if (!properties) return "-";
  const arr = JSON.parse(properties) || [];
  if (arr.length > 1) {
    const str = arr.reduce((a, b) => {
      return a.specificationVal + "+" + b.specificationVal;
    });
    return str;
  } else if (arr.length === 1) {
    return arr[0].specificationVal;
  } else {
    return "-";
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.remark_style {
  // width: 100px;
  p {
    color: red !important;
    font-size: 30px !important;
  }
  img {
    width: 100px !important;
  }
}
table {
  border-collapse: collapse;
}
table td,
table th {
  border: 1px solid black; /* 单元格边框 */
}
.btn_print {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.laundry {
  padding: 20px;
}
.procure-entry-list {
  height: calc(100% - 20px);
  overflow-y: auto;
  padding: 0 20px 20px 20px;
  position: relative;

  .search-wrap {
    padding: 20px;
    overflow-x: hidden;
    background-color: #f6f8fa;
  }

  .info {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 22;
    & > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid #e2e8f0;
    }
    & > div > div {
      display: flex;
    }
    .left {
      .creater {
        color: #1a1a1a;
        font-weight: bold;
      }
    }
  }
  .content {
    height: calc(100% - 75px);
    :deep(.el-aside) {
      flex: 1;
      padding: 20px 20px 20px 0;
      header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px;
        h2 {
          font-size: 18px;
          color: #86909c;
          b {
            color: #3d3d3d;
          }
        }
      }
      .products-list {
        .table-header {
          background-color: #f2f6fc;
          margin-bottom: 10px;
        }
        .table-body {
          .list-item {
            margin-bottom: 10px;
            & > div {
              border: 1px solid #e1e6ed;
              display: flex;
              align-items: center;
              &:not(:first-of-type) {
                border-left: none;
              }
            }
            .col1 {
              & > div {
                display: flex;
              }

              .left {
                img {
                  width: 80px;
                  height: 80px;
                  border-radius: 4px;
                }
              }
              .right {
                padding-left: 18px;
                .name {
                  font-size: 14px;
                  color: #3d3d3d;
                  margin-bottom: 5px;
                }
                p {
                  font-size: 12px;
                  color: #86909c;
                  margin-bottom: 5px;
                }
              }
            }
            .tips {
              display: flex;
              padding: 16px 14px;
              border-top: none;
              border-left: 1px solid #e1e6ed !important;
              p {
                width: 38px;
              }
              .el-input {
                flex: 1;
                .el-input__wrapper {
                  background-color: #f2f3f5;
                }
              }
            }
            .tips2 {
              p {
                width: auto;
              }
            }
          }
        }
        .table-header,
        .table-body {
          & > div > div:first-of-type {
            display: flex;
            justify-content: space-between;
            & > div {
              padding: 14px 20px;
              &.col1 {
                width: 45%;
              }
              &:not(:first-of-type) {
                flex: 1;
              }
            }
          }
        }
      }
    }
    :deep(.el-main) {
      width: 300px;
      flex: none;
      background-color: #f6f8fa;
      border-left: 1px solid #e2e8f0;
      .sh-store {
        display: flex;
        align-items: center;
        p {
          width: 66px;
        }
        .el-select {
          flex: 1;
        }
      }
      .kh-info {
        h3 {
          color: #86909c;
          font-weight: normal;
          margin: 0 0 16px 0;
        }
        p {
          color: #86909c;
          margin-bottom: 10px;
        }
        b {
          font-weight: normal;
          color: #1a1a1a;
        }
      }
      .logis-wrap {
        header {
          display: flex;
          justify-content: space-between;
          font-size: 16px;
          color: #86909c;
          margin-bottom: 10px;
        }
        .logis-info {
          background-color: white;
          h2 {
            font-size: 12px;
            line-height: 24px;
            padding: 12px 10px;
          }
          .el-divider {
            margin-top: 0;
          }
          .el-timeline {
            padding-left: 50%;
            max-height: 200px;
            overflow-y: auto;
            .el-timeline-item__wrapper {
              padding-left: 18px;
            }
            .el-timeline-item__node--normal {
              height: 8px;
              left: 1px;
              width: 8px;
            }
            .left {
              width: 100px;
              // border: 1px solid #eee;
              position: absolute;
              left: -110px;
              text-align: right;
            }
            .right {
              width: 100px;
              // border: 1px solid #eee;
            }
          }
        }
      }
      .rk-tips {
        p {
          color: #4e5969;
          margin-bottom: 16px;
        }
      }
    }
  }
  .action-wrap {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 64px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
  }
}
</style>
